<template>
  <div class="home">
    <div id="map"></div>
    <div class="progress">
      <progress-bar :list='list'></progress-bar>
    </div>
    <div ref="popup" class="popup" v-show="shopPopup">
      <span class="icon-close" @click.self="closePopup">✖</span>
      <div class="content">{{ "当前坐标为:" + currentCoordinate }}</div>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import gisModel from "../../gisApi";
import { Map, View, Feature } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Point } from "ol/geom";
import Overlay from "ol/Overlay";
import { Style, Icon } from "ol/style";
import { Vector as SourceVec } from "ol/source";
import { Vector as LayerVec } from "ol/layer";
import gisApi from '../../gisApi'
import progressBar from './popups2.vue'
export default {
  data() {
    return {
      map: null,
      shopPopup: false,
      popup: null,
      currentCoordinate: "",
      localList: [],
      localSource: null,
      list:[{value:'123',handle:()=>{console.log(123)}}]
    };
  },
  mounted() {
    // this.vectorTileLayer();
    this.init();
    this.vectorTileLayer();
  },
  components:{
    progressBar:progressBar
  },
  methods: {
    init() {
      var source = new XYZ({
        url: gisModel.layerConfig.tileUrl,
      });
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: source,
          }),
        ],
        view: new View({
          projection: "EPSG:3857",
          extent: gisApi.mapConfig.extent,
          center: gisApi.mapConfig.center,
          minZoom: 15,
          maxZoom: 19,
          zoom: 15,
        }),
      });
    },
    markOne(vectorSource) {
      this.map.on("click", (evt) => {
        this.currentCoordinate = [];
        this.shopPopup = true;
        var coordinate = evt.coordinate; //鼠标单击点的坐标
        this.currentCoordinate = coordinate;
        //新建一个要素ol.Feature
        console.log(coordinate);
        var newFeature = new Feature({
          geometry: new Point(coordinate), //几何信息
          name: "标注点",
        });
        newFeature.setStyle(this.createLabelStyle(newFeature)); //设置要素样式
        let elPopup = this.$refs.popup; //设置弹窗
        this.popup = new Overlay({
          element: elPopup,
          positioning: "bottom-center",
          stopEvent: true,
          autoPan: true, // 如果弹窗在底图边缘时，底图会移动
          autoPanAnimation: {
            // 底图移动动画
            duration: 250,
          },
        });
        setTimeout(() => {
          // 设置弹窗位置
          // 这里要设置定时器，不然弹窗首次出现，底图会跑偏
          this.popup.setPosition(coordinate);
        }, 0);
        this.map.addOverlay(this.popup);
        vectorSource.addFeature(newFeature);
      });
    },
    // 关闭弹窗
    closePopup() {
      // 把弹窗位置设置为undefined，并清空坐标数据
      // this.overlay.setPosition(undefined);
      this.shopPopup = false;
    },
    vectorTileLayer() {
      // 创建矢量容器
      var vectorSource = new SourceVec({});
      //创建图标特性
      var iconFeature = new Feature({
        geometry: new Point([12728723.477446418, 3568390.720042001], "XY"),
      });

      //将图标特性添加进矢量中
      vectorSource.addFeature(iconFeature);
      //创建图标样式
      var iconStyle = new Style({
        image: new Icon({
          opacity: 0,
          src:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594359193211&di=1d6bb819a5daa724ff65cc4d011d4d42&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_pic%2F17%2F10%2F27%2F05dc60e54e3aa5d093cdc32611303643.jpg",
        }),
      });
      //创建矢量层
      var vectorLayer = new LayerVec({
        source: vectorSource,
        style: iconStyle,
      });
      //添加进map
      this.map.addLayer(vectorLayer);
      this.markOne(vectorSource);
    },
    createLabelStyle() {
      return new Style({
        image: new Icon({
          anchor: [0.5, 60], //锚点
          anchorOrigin: "top-right", //锚点源
          anchorXUnits: "fraction", //锚点X值单位
          anchorYUnits: "pixels", //锚点Y值单位
          offsetOrigin: "top-right", //偏移原点
          opacity: 0.75,
          scale: 0.05,
          src:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594359193211&di=1d6bb819a5daa724ff65cc4d011d4d42&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_pic%2F17%2F10%2F27%2F05dc60e54e3aa5d093cdc32611303643.jpg", //图标的URL
        }),
        cursor: "point",
      });
    },
    onFeatureSelect(feature) {
      console.log(feature);
    },
  },
};
</script>

<style lang="scss" scoped>
.progress{
  width: 300px;
  height: 200px;
  background-color: skyblue;
  position: absolute;
  top: 60px;
  left: 100px;
}
.home {
  height: 100%;
}
#map {
  height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
  display: none;
}
/* 弹窗样式 */
.popup {
  min-width: 280px;
  margin-bottom: 1rem;
  position: relative;
  background: #fff;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;

  /* 弹窗下方的小三角形 */
  &::after {
    display: block;
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border: 12px solid transparent;
    border-top-color: #fff;
    bottom: -23px;
    left: 50%;
    transform: translateX(-50%);
  }
}
/* 关闭弹窗按钮 */
.icon-close {
  cursor: pointer;
  align-self: flex-end;
  margin-bottom: 10px;
}
</style>
